<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // JQuery
        JQ: 就是一个js库
        本质上: jQ就是一段js代码, jQ将webAPI中操作网页的各种方式进行了封装, 将封装后的js文件称为js库(jQ)
        jQ作用: 减少更少的代码量



        // jQ基本使用:
        ☞ 先下载JQ文件(文件带有 min.js----压缩版本       文件没有 min.js----开发版)
        ☞ 在网页中引入jQ文件, 本质上就是引入js文件(使用该文件中提供的各种方法, 才能使用JQ的写法)
        建议: 推荐将JQ文件在html结构后面引入


        // $符号
        $jQuery的别名
        $jQuery中的顶级对象




        // 入口函数
        // 当js代码写在html之前时,就可以用入口函数使js代码加载在html之后
        // 类似于原生js中的load事件功能
        $(function () { })
        $(document).ready(function () { })





        // $是jQ中的顶级对象
        // $符号表示jQuery的别名(能用$的,都可以使用jQuery)
        // ☞ 在原生js中,window是js中的顶级对象
        // ☞ 在jQ中, $是jQ的顶级对象
        let li = $('li')
        let li = jQuery('li')
            (jQuery === $)  //true





        // jQ对象特点:
        // a) jQ对象带有: jQuery.fn.init
        // b) jQ对象是一个数组
        let div = $('div');
        console.log(div);


        // 通过原生js得到的标签只能按照原生js提供的方式处理, 通过jQ得到的标签只能使用jQ提供的方法去处理, 二者不能通用
        // 如果原生js要用jQ中的方法,或者jQ要使用原生js中的方法,那么需要将DOM对象和jQ对象进行转换






        // DOM对象和JQ对象相互转换

        // 将DOM对象转化为jQ对象
        语法: $(DOM对象)
        let div = document.querySelector('div');
        // 将DOM对象转化为jQ对象    $(div1)
        console.log($(div));






        // 将jQ对象转化为DOM对象
        // div是一个jQ对象,jQ对象就是一个数组
        // jQ数组对象中保存的就是每一个DOM对象
        // 语法: jQ对象[索引]       div[0]
        let div = $('div');
        console.log(div[0]);





        // 通过jQ获取页面中的元素
        // 通用语法: $('css选择器');
        // a)标签选择器
        console.log($('li'));
        // b)类选择器
        console.log($('.one'))
        // c)id选择器
        console.log($('#two'));
        // d)复合选择器 (后代选择器  结构伪类选择器 ...)
        console.log($('ul li'));
        // e)结构伪类选择器
        console.log($('ul li:nth-child(2)'));



        //通过jQ提供的选择器获取元素

        // 通过索引获取元素
        $('li:eq(3)')   // 选中自由选择索引  :eq(索引)
        $('li:odd')     // 选中索引为奇数    :odd
        $('li:even')    // 选中索引为偶数    :even
        $('li:first')   // 选中第一个        :first
        $('li:last')    // 选中最后一个      :last


        // 获取父元素
        jQ对象.parent()         // 获取直接父元素   parent()      
        jQ对象.parents()        // 获取所有父元素   parents()
        jQ对象.parents('body')  // 获取选定父元素   li.parents('body')


        // 获取子元素   children(选择器)
        p.children()    // 返回直接子元素
        p.find('span')  // 获取所有符合条件子元素   find(选择器)


        // 获取兄弟元素     siblings(选择器)
        p.siblings()    // 获取所有兄弟元素
        p.siblings('h3')// 获取指定兄弟元素



        // 标签对象.nextAll(选择器) 
        h1.nextAll()
        获取当前标签的后面所有的兄弟元素(带有选择器: 代表获取指定的兄弟元素)

        // 标签对象.prevAll(选择器) 
        h1.prevAll('a')
        获取当前标签前面所有的兄弟元素(带有选择器: 代表获取指定的兄弟元素)







        // jQ注册事件
        // jQ中注册事件的时候,不需要手动遍历,因为jQ自己内部遍历元素(隐式迭代)
        // 语法: jQ对象.事件类型(function () { })
        // this是DOM对象,如果要使用jQ中提供的方式,则this必须用${} 括起来 $(this),以此来使用jQ的方法
        li.click(function () {
            $(this).css('background', 'cyan')
        })







        // 链式编程(jQ排他思想也用的到)
        // 操作事件样式时并且同时清空兄弟元素的样式
        // $(this).css('color', 'red').siblings().css('color', '#000');

        // 同一个元素操作两次css样式
        btns.click(function () {
            $(this).css('color', 'red').siblings().css('color', '#000');
        })

        // 同一个事件源注册两个事件
        last_li.mouseover(function () {
            let u2 = $(this).find('.u2');
            u2.css('display', 'block');
        }).mouseout(function () {
            let u2 = $(this).find('.u2');
            u2.css('display', 'none');
        })








        // jQ操作样式
        // 行内样式
        设置单个属性: jQ对象.css('css属性', 值);
        设置多个属性: jQ对象.css({ 'css属性': 值, 'css属性': 值 })


        // 类样式
        // 添加类名 
        div.addClass('bd');     //jQ对象.addClass('类名')  添加类名  
        1. 给标签添加类名, 如果要添加多个类名, 则需要使用空格隔开
        2. 添加类名的时候, 不会覆盖原来的类名

        // 移除类名
        div.removeClass('bd');  //jQ对象.removeClass('类名') 移除类名
        1. 移除类名设置指定要被移除的类名即可, 如果要移除多个类名, 则使用空格隔开
        2. 如果没有设置类名, 则表示清空所有类名

        // 切换类名
        div.toggleClass('bd');  //jQ对象.toggleClass('类名')  切换类名
        1. 切换类名
        2. 如果标签有该类名, 则会移除类名
        3. 如果标签没有类名, 则会添加类名




        // hover事件: 替代鼠标进入和鼠标离开事件
        // 语法: jQ对象.hover(function () { }, function () { })
        // 鼠标进入设置背景颜色,鼠标离开移除背景色
        let div = $('div');
        div.hover(function () { // 鼠标进入功能
            $(this).css('background', 'red');
        }, function () {        // 鼠标离开功能
            $(this).css('background', '');
        })
    </script>
</body>

</html>